import { ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { findTopCategory } from '@/api/category'
/**
  路由path没变 只是参数发生了变化 vue-router会直接复用component
  复用之后会导致 路由对应的组件不会重新渲染 生命周期不会执行 新id对应的新数据就不会请求
  表现出来的样子就是 - 虽然看起来id已经变了 但是内容没变

  如何解决？ 看场景  如果当前没有性能要求 选1  如果有性能要求选2
   1. 不走缓存 破坏缓存 - 粗暴 但是简单  给router-view添加一个key属性
   2. 还走缓存 但是在切换路由的再次执行一下获取数据的方法 - 精细化 复杂

  注意：性能优化是一个值得关注的问题 但是不是一个必须要做的事情 遇到了再做
  先考虑核心业务的视线 再考虑性能优化 [锦上添花]

  简历: 1. key的作用  2. 做过哪些性能优化的事情 [遇到了路由缓存问题 先使用key解决 但是发现破坏了缓存
  后来呀 我又发现了一种方案 新的钩子函数 可以在保证缓存还在的情况下 做精细化的更新]
 */

function useCategory () {
  const categoryData = ref({})
  const route = useRoute() // this.$route
  // 在首次渲染完毕的之后 不传参数的时候 以当前的路由参数为主
  // 当路由切换的时候 以传入的id为主
  async function fetchCategory (id = route.params.id) {
    // 如何在setup获取路由参数id
    const res = await findTopCategory(id)
    console.log(res)
    categoryData.value = res.data.result
  }
  fetchCategory()
  onBeforeRouteUpdate((to) => {
    // 在每次路由切换的时候自动执行
    console.log('路由切换了', to.params.id)
    // 以最新的id获取最新的数据
    fetchCategory(to.params.id)
  })
  return {
    categoryData
  }
}

export default useCategory
